<template>
    <div class="app-container">
        <div class="warp_padding">       
            <div class="head-container">
                <!-- 搜索 -->
                <label  id="labelQuery" class="labelQuery">{{rName}}标题: </label>
                <el-input v-model="formDate.resName" clearable :placeholder="rName+'标题搜索'" style="width: 140px;" class="filter-item" @keyup.enter.native="toQuery" @change="toQuery()"/>

                <span v-if="device!=='mobile'">
                    <label class="labelQuery">{{rName}}类型: </label>
                    <el-select v-model="formDate.useType" clearable :placeholder="rName+'类型'" @change="toQuery()" style="width:140px">
                        <el-option
                              v-for="item in condition"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                        </el-option>
                    </el-select>

                    <!-- <label class="labelQuery">隐私: </label>
                    <el-select v-model="formDate.resStatus" clearable placeholder="请选择" @change="toQuery()" style="width:100px">
                        <el-option
                              v-for="item in resStatu"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                        </el-option>
                    </el-select> -->

                    <label class="labelQuery">上传时间: </label>
                    <!-- <el-input v-model="formDate.createtime" clearable placeholder="上传时间搜索" style="width: 140px;" class="filter-item" @keyup.enter.native="toQuery" @change="toQuery()"/> -->
                    <el-date-picker
                      v-model="formDate.createtime"
                      type="date"
                      placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 150px;" @change="toQuery()"> 
                    </el-date-picker>

                </span>

                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button> 
                <eForm ref="form" :is-add="isAdd"/>               
            </div>

            <el-tabs v-model="activeName"  @tab-click="handleClick">
                <el-tab-pane label="视频" name="first" >
                    
                </el-tab-pane>
                <el-tab-pane label="文件" name="second">
                    
                </el-tab-pane>
            </el-tabs>
        </div>

        <el-table :data="lists" highlight-current-row v-loading="listLoading"   style="width: 100%;margin:0 15px" max-height="650">
                <el-table-column type="index" width="45"></el-table-column>
                
                <el-table-column prop="resName"  :label="rName+'标题'"   :show-overflow-tooltip="true" min-width="180"></el-table-column>   

                <el-table-column prop="useType" :label="rName+'类型'" :formatter="useType"></el-table-column>

                <el-table-column prop="resSize" :label="rName+'大小(M)'" min-width="110" sortable ></el-table-column>

                <el-table-column prop="videoDuration" label="时长(分钟min)" v-if="this.formDate.resType ==0" min-width="110" :show-overflow-tooltip="true"  ></el-table-column>
                <el-table-column prop="resStatus" label="隐私" :formatter="resStatus"></el-table-column>

                <el-table-column ref="table" :show-overflow-tooltip="true" prop="resUrl" label="预览">
                    <template slot-scope="scope">
                      <a :href="scope.row.resUrl" v-if="scope.row.resUrl != ''" style="color: #42b983" target="_blank" title="IE浏览器不支持在线预览，请点击下载本地查看或者更换其他浏览器">点击预览</a>
                    </template>
                </el-table-column>

                <el-table-column prop="createtime" label="上传时间"  :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div>{{scope.row.createtime | formatDate}} </div>
                    </template>
                </el-table-column> 

                <el-table-column prop="checkStatus" label="审核状态"  :formatter="checkStatus" :show-overflow-tooltip="true">
                </el-table-column>

                <el-table-column prop="checkRank" label="发布状态"  :formatter="checkRank" :show-overflow-tooltip="true">
                </el-table-column>

                <!-- <el-table-column ref="table" :show-overflow-tooltip="true" prop="url" label="缩略图">
                    <template slot-scope="scope">
                      <a :href="scope.row.url" style="color: #42b983" target="_blank"><img :src="scope.row.url" alt="点击打开" class="el-avatar"></a>
                    </template>
                </el-table-column> -->

                <el-table-column label="操作" min-width="100" v-if="userId != 'admin'">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @click="handleBtn(scope.row.id)" v-if="scope.row.resStatus==0 &&scope.row.checkStatus == 0 &&userId != 'admin'">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination background  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page.sync="formDate.pageNo" :page-count="pageCount" :page-sizes="[10, 20, 30, 50,100]"  layout="total, sizes,prev, pager, next, jumper" :pager-count="pagerCount" :total="total" class="pagination"></el-pagination>
        </el-col>
    </div>
</template>

<script>
import checkPermission from '@/utils/permission' 
import { resourcesList } from '@/api/request'
import { mapGetters } from 'vuex'
import { formatDate } from '@/utils/formatDate.js';
import { resourcesSchool } from '@/api/data'
import eForm from './module/form'
export default {
    components: { eForm },
    computed: {
        ...mapGetters([
          'device',
          'userId'
        ])
    },
    data() {
        return {
            rName:'视频',
            activeName: 'first',
            pageCount: 0,
            total:0,  
            listLoading: false,
            lists: [],             
            pagerCount:11,   
            formDate:{
                pageNo: 1,  
                pageSize:10,
                resType:'0',  //0视频，1文件
                resName:'',
                useType:'',   //0优课1微课2教育资源3其他视频4文档5图片6其他文件
                resStatus:0,
                createtime:''               
            },
            isAdd:true,
            condition:[
                {
                    id: 0,
                    name: '优课'
                },
                {
                    id: 1,
                    name: '微课'
                },
                {
                    id: 2,
                    name: '教育资源'
                },
                {
                    id: 3,
                    name: '其他'
                },
            ],
            resStatu:[
                {
                    id:'0',
                    name:'公开',
                },
                {
                    id:'1',
                    name:'私有',
                }
            ]
        }
    },
    mounted:function(){
        this.init()
    },
    filters: {
        formatDate(time) {
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }, 
    },
    methods: {
        checkPermission,
        handleClick(tab, event) {
            if (tab.index ==1) {
                this.rName = "文件"
                this.condition =[{
                    id: 4,
                    name: '文档'
                },
                {
                    id: 5,
                    name: '图片'
                },
                {
                    id: 6,
                    name: '其他'
                }]
            }else{
                this.rName = "视频"
                this.condition =[{
                    id: 0,
                    name: '优课'
                },
                {
                    id: 1,
                    name: '微课'
                },
                {
                    id: 2,
                    name: '教育资源'
                },
                {
                    id: 3,
                    name: '其他'
                }]
            }
            this.formDate.resType = tab.index
            this.init()
        },
        toQuery(){
            this.init()
        },
        init(){
            this.listLoading = true
            let params = {...this.formDate}
            resourcesList(params).then(res => { 
                let { list, total } = res
                this.lists = list
                this.total = total
                this.listLoading = false 
            })
        },
        handleCurrentChange(val) {
            this.formDate.pageNo = val;
            this.init()
        },
        handleSizeChange(val) {
            this.formDate.pageSize = val
            this.init()
            // console.log(`page ${val}`);
        },        
        useType(row, column) {
            return row.useType == 0 ? '优课' : row.useType == 1 ? '微课' :  row.useType == 2 ? '教育资源' :row.useType == 3 ? '其他视频' : row.useType == 4 ? '文档' : row.useType == 5 ? '图片' : row.useType == 6 ? '其他文档' :'';
        },
        resStatus(row){
           return row.resStatus == 0 ? '公开' : row.resStatus == 1 ? '私有' :'其他';
        },
        checkStatus(row){
           return row.checkStatus == 0 ? '待审核' : row.checkStatus == 1 ? '审核中' :  row.checkStatus == 2 ? '已通过' :  row.checkStatus == 3 ? '不通过' :'其他';
        },
        checkRank(row){
           return row.checkRank == 0 ? '审核中' : row.checkRank == 1 ? '已发布' : row.checkRank == 2 ? '拒绝发布':'其他';
        },
        async handleBtn(id){
            this.isAdd = true
            this.$refs.form.dialog = true
            this.$refs.form.form = { 
                id:id
            }
        },
       
    },
}

</script>


<style scoped lang="scss">

</style>
